<template>
  <div>
    <el-menu
      @select="selectMenu"
      :default-active="currentIndexLight"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      :router="startRouter"
      active-text-color="#ffd04b"
    >
      <!--
      :default-openeds="arrIndex"
      -->
      <div v-for="item in menuList" :key="item.path">
        <!-- 没有子菜单 -->
        <template v-if="item.children && item.children.length == 0">
          <el-menu-item :index="item.path">
            <i class="el-icon-menu"></i>
            {{ item.title }}
          </el-menu-item>
        </template>

        <!-- 有子菜单 -->
        <el-submenu v-else :index="item.path">
          <template slot="title">
            <i class="el-icon-menu"></i>
            {{ item.title }}
          </template>

          <template v-for="child in item.children">
            <!-- 这里是类似递归循环 -->
            <sidebar-item
              v-if="child.children&&child.children.length>0"
              :item="child"
              :key="child.path"
            />
            <el-menu-item v-else :key="child.path" :index="child.path">
              <i class="el-icon-location"></i>
              {{ child.title }}
            </el-menu-item>
          </template>
        </el-submenu>
      </div>
    </el-menu>
  </div>
</template>
<script>

export default {
  name: 'menu',
  data() {
    return {

      startRouter: true,//开启路由标识， ，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
      currentIndexLight: '',//当前激活菜单的 index  高亮显示
      arrIndex: [],
      menuList: [
        {
          "path": "/awaitdoing",     //菜单项所对应的路由路径
          "title": "功能1",     //菜单项名称
          "children": []        //是否有子菜单，若没有，则为[]
        },
        {
          "path": "/quickset",
          "title": "功能2",
          "children": []
        },
        {
          "path": "aa",
          "title": "功能3",
          "children": [
            {
              "path": "/awaitdo",
              "title": "功能3-1",
              "children": []
            },
            {
              "path": "/alreadygreen",
              "title": "功能3-2",
              "children": []
            },
            {
              "path": "/approvedby",
              "title": "功能3-3",
              "children": []
            },
          ]
        },
        {
          "path": "/func10",
          "title": "功能10",
          "children": []
        }
      ]

    }
  },

  methods: {
    selectMenu(key, keyPath) {
      console.log(key, keyPath)
      this.currentIndexLight = key;
    },
    // 展开指定的 sub-menu
    handleOpen(key, keyPath) {
      console.log('展开的时候触发', key, keyPath);

    },

    //    收起指定的 sub-menu
    handleClose(key, keyPath) {
      console.log('收起的时候触发', key, keyPath);
    }


  }
}
</script>
